<template>
    <div>
        <div class="seach">
            <span class="seachStatus">
                {{$t('tsknum')}}
                <el-input :placeholder="$t('plsipt')" size="mini" v-model.trim="monaudfm.orderNo"></el-input>
            </span>
            <span class="seachStatus">
                {{$t('subttim')}}
                <el-date-picker :placeholder="$t('plsset')" v-model="auditTime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
            </span>
            <span>
                {{$t('audsta')}}
                <el-select :placeholder="$t('plsset')" size="mini" v-model="monaudfm.auditStatus">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('tobeaud')" value="WAITCONFIRM"></el-option>
                    <el-option :label="$t('passed')" value="SUCCESS"></el-option>
                    <el-option :label="$t('reject')" value="REJECT"></el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="seachMon" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="moneyAudTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="orderNo" :label="$t('tsknum')" min-width="150">
                </el-table-column>
                <el-table-column prop="batchNo" :label="$t('batchNo')" min-width="153">
                </el-table-column>
                <el-table-column prop="merId" :label="$t('mertid')" min-width="159">
                </el-table-column>
                <el-table-column prop="merName" :label="$t('mertnam')" min-width="81">
                </el-table-column>
                <el-table-column prop="paymentAmt" :label="$t('amtofpayt')" min-width="147">
                </el-table-column>
                <el-table-column prop="applyTime" :label="$t('subttim')" min-width="142">
                </el-table-column>
                <el-table-column prop="auditStatus" :label="$t('audsta')" min-width="80">
                </el-table-column>
                <el-table-column prop="auditRemark" :label="$t('submtim')" min-width="94">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" v-if="scope.row.auditStatus === $t('tobeaud') || scope.row.auditStatus === $t('tobereaud')" :disabled="scope.row.isAble" @click="showAudit(scope.row)">{{$t('exme')}}</el-link>
                        <el-link type="primary" @click="View(scope.row)">{{$t('detls')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="monaudfm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="monaudfm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :pager-count="5">
            </el-pagination>
        </el-card>
        <el-dialog :title="$t('payaud')" :visible.sync="auditDialogVisible" width="30%" @close="auditDialogVisibleClosed(auditForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="auditForm" :model="auditForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('remk')" prop="auditRemark" :placeholder="$t('plsipt')">
                    <el-input type="textarea" v-model="auditForm.auditRemark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="auditNan(auditForm, 'SUCCESS')" v-preventReClick>{{$t('passed')}}</el-button>
                <el-button type="warning" @click="auditNan(auditForm, 'REJECT')" v-preventReClick>{{$t('reject')}}</el-button>
                <el-button @click="auditDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getauditsettlepaymentList,
    auditmoneyrecord
} from '@/libs/reqlist.js'
import { getInitDate } from '@/libs/getDate.js'
export default {
    data () {
        return {
            isOk: false,
            total: 0,
            monaudfm: {
                orderNo: null,
                auditStatus: 'WAITCONFIRM',
                merName: null,
                startTime: null,
                endTime: null,
                merId: null,
                orderParamIdx: 0,
                orderType: null,
                applyTypeList: ['SUBMIT_SETTLE_PAY'],
                pageNum: 1,
                pageSize: 10
            },
            moneyAudTab: [],
            auditDialogVisible: false,
            auditForm: {
                appType: 'SUBMIT_SETTLE_PAY',
                auditRemark: '',
                auditStatus: '',
                orderNo: ''
            },
            auditTime: null
        }
    },
    methods: {
        getMonAudList () {
           getauditsettlepaymentList(this.monaudfm).then(res => {
                if (res.data.code === '000000') {
                    this.total = res.data.data.total - 0
                    for (let i = 0; i < res.data.data.list.length; i++) {
                        let item = res.data.data.list[i]
                        if (item.auditStatus === 'WAITCONFIRM') item.auditStatus = this.$t('tobeaud')
                        if (item.auditStatus === 'SUCCESS') item.auditStatus = this.$t('passed')
                        if (item.auditStatus === 'REJECT') item.auditStatus = this.$t('reject')
                        if (item.auditStatus === 'TO_REVIEW') item.auditStatus = this.$t('tobereaud')
                        if (item.paymentStatus === '0') item.paymentStatus = this.$t('create')
                        if (item.paymentStatus === '1') item.paymentStatus = this.$t('succ')
                        if (item.paymentStatus === '2') item.paymentStatus = this.$t('failed')
                        if (item.paymentStatus === '3') item.paymentStatus = this.$t('inprogress')
                        if (item.paymentStatus === '4') item.paymentStatus = this.$t('sucsendtoquery')
                    }
                    this.moneyAudTab = res.data.data.list
                }
           })
        },
        seachMon () {
            if (this.auditTime !== null) {
                this.monaudfm.startTime = this.auditTime[0]
                this.monaudfm.endTime = this.auditTime[1]
            }
            if (!this.auditTime) {
                this.monaudfm.startTime = null
                this.monaudfm.endTime = null
            }
            this.monaudfm.pageNum = 1
            this.getMonAudList()
        },
        handleSizeChange (newSize) {
            this.monaudfm.pageSize = newSize
            this.getMonAudList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.monaudfm.pageNum = newNum
            this.getMonAudList()
        },
        showAudit (data) {
            this.auditForm.orderNo = data.orderNo
            this.auditDialogVisible = true
        },
        auditNan (form, sta) {
            this.$refs[form].validate(async valid => {
                if (!valid) return
                this.auditForm.auditStatus = sta
                auditmoneyrecord(JSON.stringify(this.auditForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('audcompd'),
                            type: 'success'
                        })
                        this.auditDialogVisible = false
                        this.getMonAudList()
                    }
                })
            })
        },
        auditDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        View (data) {
            window.sessionStorage.setItem('notpay', JSON.stringify(data))
            this.$router.push('/monauddet')
        }
    },
    mounted () {
        this.getMonAudList()
    }
}
</script>

<style lang="less" scoped>
@import './moneyAudit.less';
</style>
